// import { addRule, removeRule, rule, updateRule } from '@/services/api/auth';
import { deleteItem, getDeptList } from '@/services/api/dept';

import { DeptResultItem } from '@/services/api/model/deptModel';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import '@umijs/max';
import { Button, Popconfirm } from 'antd';
import React, { useRef, useState } from 'react';
import FormModal from './components/CreateForm';

const Department: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [tableData, setTableData] = useState<DeptResultItem[]>([]);
  //提交
  const onSubmit = () => {
    // 重置到默认值，包括表单
    // 断言标识,reloadAndRest一定是存在的
    actionRef.current!.reloadAndRest!();
  };

  // 删除
  const handleConfirm = async (id: number) => {
    // 这里 return 一个 primise 之后会执行异步关闭 resolve(null) 之后关闭
    try {
      await deleteItem(id);
      actionRef.current!.reloadAndRest!();
      Promise.resolve(null);
    } catch (error) {
      Promise.resolve(null);
    }
  };
  // const values = await formRef.current?.validateFieldsReturnFormatValue?.()

  const columns: ProColumns<DeptResultItem>[] = [
    {
      title: '用户名',
      align: 'center',
      dataIndex: 'name',
    },

    {
      title: '用户数量',
      align: 'center',
      dataIndex: 'userCount',
      search: false,
    },
    {
      title: '子部门数量',
      align: 'center',
      dataIndex: 'subDeptCount',
      search: false,
    },
    {
      title: '备注',
      align: 'center',
      dataIndex: 'remark',
      search: false,
    },
    {
      title: '操作',
      width: 100,
      align: 'center',
      dataIndex: 'option',
      valueType: 'option',
      search: false,
      render: (_, record) => [
        <FormModal
          trigger={<Button type="text">编辑</Button>}
          onSubmit={onSubmit}
          key={'edit'}
          title="编辑"
          initialValues={{
            ...record,
            isPid: record.parentId === 0 ? false : true,
          }}
          tableData={tableData}
        ></FormModal>,
        <Popconfirm key={'del-1'} title="确定删除吗" onConfirm={() => handleConfirm(record.id!)}>
          <Button key={'del1'} danger style={{ width: '100%' }} size="small" type="text">
            删除
          </Button>
        </Popconfirm>,
      ],
    },
  ];
  return (
    <PageContainer>
      <ProTable<DeptResultItem>
        actionRef={actionRef}
        rowKey="id"
        // 部门接口暂时没有查询,后续需要的话找后台加一个筛选字段
        search={false}
        pagination={false}
        toolBarRender={() => [
          <FormModal tableData={tableData} key={'add'} onSubmit={onSubmit}></FormModal>,
        ]}
        request={async (params) => {
          // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
          // 如果需要转化参数可以在这里进行修改
          const msg = await getDeptList({ ...params });
          setTableData(msg.data);
          return {
            data: msg.data,
            // success 请返回 true，
            // 不然 table 会停止解析数据，即使有数据
            success: true,
            // 不传会使用 data 的长度，如果是分页一定要传
          };
        }}
        columns={columns}
      />
    </PageContainer>
  );
};
export default Department;
